<template>
	<view class="flex-col container">
		<view class="flex-col group">
			<!-- #ifdef MP-WEIXIN -->
			<view class="items-title">
				<image src="../../static/logo.png" mode="widthFix"></image>
				<view>弘翰酒业</view>
			</view>
			<view class="flex-col group_1">
				<text class="text_3">申请获取以下权限</text>
				<text class="text_3">获得你的公开信息（昵称、头像等）</text>
			</view>
			<view class="flex-col items-center button">
				<button type="default" open-type="getPhoneNumber" class="phone-btn"
					@getphonenumber.stop="getPhoneNumber">手机号授权登录</button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>

	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
		
		import {loginBtn} from '@/api/index.js'
		import {toast} from '@/utils/common.js'
	export default {
		data() {
			return {
				data: [],
				encryptedKey: null,
				mobile: '',
				show: false,
				userInfo: null,
				type: null,
				avatarUrl: defaultAvatarUrl,
				nickname: '',
				loadingModel: false,
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				eventData: undefined
			}
		},
		onLoad() {
			
		},
		methods: {
			inputValue(e) {
				this.nickname = e.detail.value
			},
			onChooseAvatar(e) {
				console.log(e)
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},

			loginByWeixin(type) {
				this.type = type
				let that = this;
				// #ifdef  MP-WEIXIN
				uni.getUserProfile({
					desc: '获取您的昵称与头像完善个人信息',
					success(res) {
						console.log(res);
						that.userInfo = res.userInfo;
						// that.show = true
						console.log(res.userInfo);
						
					},
					fail(res) {
						toast('请先授权登录，谢谢')
						console.log(res);
					}
				})

				// #endif

			},
			getPhoneNumber(e) {
				console.log(e);
				this.eventData = e;
				uni.login({
					provider: 'weixin',
					success: function(res) {
						console.log(98998,res);
						loginBtn({
							code:res.code
						}).then(res=>{
							if(res.code==200){
								toast("登陆成功")
								uni.setStorageSync("access_token", res.data.access_token);
								uni.setStorageSync("token_type", res.data.token_type);
								let userInfo = res.data.user
								uni.setStorageSync('user',JSON.stringify(userInfo))
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							}
						})
					}
				});
			},
			// submitLoading() {
			// 	let that = this;
			// 	if (that.avatarUrl == defaultAvatarUrl) {
			// 		toast("请先获取用户头像", "none", 1500);
			// 		that.$refs.loadingModal.clearLoading()
			// 		return
			// 	}
			// 	if (that.nickname == '') {
			// 		toast("请先输入您的昵称", "none", 1500);
			// 		that.$refs.loadingModal.clearLoading()
			// 		return
			// 	}
			// 	let {
			// 		encryptedData,
			// 		iv
			// 	} = this.eventData.detail;
			// 	if (!encryptedData || !iv) {
			// 		return false;
			// 	}
			// 	if (!this.encryptedKey) {
			// 		this.encryptedKey = "";
			// 	}
				
				
			// },
			// getUserInfo(e) {
			// 	console.log(e)
			// }
		}
	}
</script>

<style lang="scss">
	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.items-start {
		display: flex;
		align-items: flex-start;
	}

	.items-center {
		display: flex;
		align-items: center;
	}

	.items-end {
		display: flex;
		align-items: flex-end;
	}

	.container {
		background-color: #ffffff;
		border: solid 2rpx rgb(151, 151, 151);
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.group {
			padding: 76rpx 73rpx 543rpx 77rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.image_1 {
				align-self: center;
				width: 190rpx;
				height: 238rpx;
			}

			.group_1 {
				margin-top: 25rpx;
				margin-left: 50rpx;

				.text_1 {
					color: rgb(68, 68, 68);
					font-size: 34rpx;
					line-height: 48rpx;
					white-space: nowrap;
				}

				.text_2 {
					margin-top: 20rpx;
					color: rgb(153, 153, 153);
					font-size: 30rpx;
					line-height: 42rpx;
					letter-spacing: -0.9rpx;
					white-space: nowrap;
				}

				.text_3 {
					margin-top: 20rpx;
					color: rgb(153, 153, 153);
					font-size: 26rpx;
					line-height: 42rpx;
					letter-spacing: -0.9rpx;
					white-space: nowrap;
				}
			}

			.button {
				margin-top: 89rpx;
				// padding: 22rpx 0;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				line-height: 42rpx;
				white-space: nowrap;
				background-color: #00C785;
				border-radius: 43rpx;

				// padding: 20rpx 80rpx;
				.phone-btn {
					background: transparent;
					color: #ffffff;
					border-radius: 50rpx;
					border: none;
				}
			}

			.image-wrapper {
				background-color: rgb(255, 255, 255);
				border-radius: 50%;
				width: 196rpx;
				margin: 0 auto;
				padding-left: 0;
				padding-right: 0;

				.image_1 {
					overflow: hidden;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}
			}

			.weui-input {
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	.mask {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.mask-content {
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 80rpx 50rpx;
			width: 90%;

			.phone-btn {
				background: transparent;
				color: #ffffff;
				border-radius: 50rpx;
				border: none;
			}

			.mask-close {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
		}
	}

	.items-title {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		image {
			width: 70rpx;
			margin-right: 20rpx;
		}

		view {
			font-size: 30rpx;
			font-weight: 800;
		}
	}

	.slot-content {
		margin: 30rpx 0;
		border-top: 1px solid #ccc;
		padding-top: 40rpx;
	}
</style>